<template>
  <view class="content">
    <!-- 
    1. 轮播图部分
      indicator-dots: 是否显示小圆点（面板指示点）
      autoplay: 是否自动轮播
      interval: 切换时间间隔
      duration: 动画持续时间
     -->
    <swiper
      :indicator-dots="true"
      :autoplay="true"
      :interval="2000"
      :duration="500"
      style="width: 750rpx; height: 250rpx"
    >
      <swiper-item>
        <view class="swiper-item">
          <image
            src="../../static/demo/banner/1.jpg"
            class="img"
            mode=""
          ></image>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">
          <image
            src="../../static/demo/banner/2.jpg"
            class="img"
            mode=""
          ></image>
        </view>
      </swiper-item>
    </swiper>

    <!-- 
    2. 列表部分
     -->
    <view class="index-list flex flex-wrap">
      <view class="list-item rounded"></view>
      <view class="list-item rounded"></view>
      <view class="list-item rounded"></view>
      <view class="list-item rounded"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
    };
  },
  onLoad() {},
  methods: {},
};
</script>

<style>
.img {
  width: 100%;
}

.list-item {
  width: 375rpx;
  height: 375rpx;
  margin: 8rpx;
  background-color: #0056b3;
}
</style>
